<template>
  <b-page class="lbgh">
    <div v-if="!posterList.length" class="d-jcc-aic min-height-500">
      <a-empty/>
    </div>
    <div class="poster-list-wrap">
      <a
        target="_blank"
        :href="item.linkUrl"
        v-for="(item,index) in posterList"
        :key="index"
        class="poster-case">
        <img
          :src="item.posterUrl"
          class="poster-imgs">
        <div class="poster-content">
          <div class="poster-title">{{ item.title }}</div>
          <div class="poster-sub">{{ item.content }}</div>
        </div>
      </a>
    </div>
    <div class="poster-img-pagination" v-if="posterList.length">
      <a-pagination v-model="pagination.current" :total="pagination.total" show-less-items @change="getPage"/>
    </div>
  </b-page>
</template>

<script>
    import API from '../../../api/lbzl'

    export default {
        name: 'Lbgh',
        data () {
            return {
                posterList: [],
                pagination: {
                    current: 1,
                    total: 0,
                    size: 10
                }
            }
        },
        mounted () {
            this.getPage()
        },
        methods: {
            getPage () {
                API.FissionCopywriterPage(this.pagination).then(res => {
                    this.posterList = res.records
                    this.pagination.total = res.total
                })
            },
            changePage (current) {
                this.pagination.current = current
                this.getPage()
            }
        }
    }
</script>

<style lang="less">
    .lbgh {
        height: 100%;
        .min-height-500{
            min-height: 500px;
        }

        .poster-list-wrap {
            display: flex;
            flex-flow: row wrap;
            min-height: 600px;
        }

        .poster-case {
            display: flex;
            flex-direction: column;
            margin: 0 21px 42px 0;
            width: 280px;
            height: 280px;
            border-radius: 4px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
            background-color: #fff;
        }

        .poster-imgs {
            width: 280px;
            max-width: 280px;
            height: 196px;
            max-height: 196px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .poster-content {
            min-height: 80px;
        }

        .poster-title {
            color: #494949;
            margin-top: 16px;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 280px;
            padding: 0 14px;
            min-height: 20px;
        }

        .poster-sub {
            color: #9f9f9f;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 8px;
            width: 280px;
            padding: 0 14px;
            min-height: 20px;
        }

        .poster-img-pagination {
            margin-top: 24px;
            padding-bottom: 24px;
        }
    }

</style>
